<template>
    <div>
        <div>
            <el-button type="primary" icon="el-icon-arrow-left" @click="previous()">上一页</el-button>
            <el-date-picker
                v-model="value"
                type="month"
                placeholder="选择月" style="float: right" @change="changeMonth">
            </el-date-picker>
        </div>
        <el-divider></el-divider>
        <el-calendar v-model="value">
            <template #dateCell="{data,date}">
                <div class="date-cell" :class="{'is-today': data.isToday, 'is-selected': data.isSelected}">
                    <div class="date-cell__inner">
                        <span class="date-cell__day">{{ data.day.split('-').slice(2).join('-') }}</span>
                    </div>
                    <el-tag v-if="getResult(date)==='success'" type="success">正常</el-tag>
                    <el-tag v-if="getResult(date)==='warning'" type="warning">异常</el-tag>
                    <el-tag v-if="getResult(date)==='danger'" type="danger">缺勤</el-tag>
                </div>
            </template>
        </el-calendar>
        <div style="margin-top: 20px;text-align: center">
            <el-progress type="circle" :percentage="sum_1" status="success" style="float: left">
            </el-progress>
            <el-progress type="circle" :percentage="sum_2" status="warning">
            </el-progress>
            <el-progress type="circle" :percentage="sum_3" status="exception" style="float: right">
            </el-progress>
        </div>
        <el-divider></el-divider>
        <div style="margin-top: 20px;text-align: center">
            <el-tag type="success" style="margin-right: 20px">正常{{sum_1}}天</el-tag>
            <el-tag type="warning">异常{{sum_2}}天</el-tag>
            <el-tag type="danger" style="margin-left: 20px">缺勤{{sum_3}}天</el-tag>
        </div>

    </div>
</template>

<script>
import dayjs from "dayjs";

export default {
    data() {
        return {
            //当前用户id
            id: 0,
            //选择的年月
            value:'',
            //正常
            sum_1:0,
            //异常
            sum_2:0,
            //缺勤
            sum_3:0,
            //列表
            list:[],
            //统计正常考勤百分数
            sum_1_percentage:0,
            //统计异常考勤百分数
            sum_2_percentage:0,
            //统计缺勤百分数
            sum_3_percentage:0,
        }
    },
    watch: {
        '$route.query.id': {
            immediate: true, // 立即执行一次，以便在组件加载时获取当前的 id
            handler(newValue) {
                // 这里可以执行你需要基于新 id 做的操作
                this.id = newValue;
            }
        }
    },
    mounted() {
        this.value = dayjs().format('YYYY-MM');
        this.queryMonthStatistics(this.value);
    },
    methods: {
        dayjs,
        //回退到上一页
        previous(){
            this.$router.go(-1);
        },
        //查询本月的相关统计数据
        queryMonthStatistics(value){
            let that = this;
            let year = value.split('-')[0];
            let month = value.split('-')[1];
            that.$http("/attendance/searchMonthCheckin",'POST',{
                year:year,
                month:month,
                userId:that.id
            },(resp)=>{
                let data = resp.data;
                for(let one of data.list){
                    if(one.status!==""){
                        let color=""
                        if(one.status==="正常"){
                            color="success"
                        }else if(one.status==="迟到"){
                            color="warning"
                        }else if(one.status==="缺勤"){
                            color="danger"
                        }
                        that.list.push({
                            date:one.date,
                            info:one.status,
                            color:color
                        })
                    }
                }
                that.sum_1=resp.data.sum_1
                that.sum_2=resp.data.sum_2
                that.sum_3=resp.data.sum_3
                //判断当前月份有几天
                let days = dayjs(value).daysInMonth();
                //根据当前月份的天数化成100个数
                let sum = 100;
                //比重
                let summary = sum/days;
                this.sum_1_percentage = this.sum_1*summary;
                this.sum_2_percentage = this.sum_2*summary;
                this.sum_3_percentage = this.sum_3*summary;
            })
        },
        //切换月份
        changeMonth(){
            this.list = [];
            this.sum_1=0;
            this.sum_2=0;
            this.sum_3=0;
            this.sum_1_percentage = 0;
            this.sum_2_percentage = 0;
            this.sum_3_percentage = 0;
            this.queryMonthStatistics(dayjs(this.value).format('YYYY-MM'));
        },
        //根据当前日期查询考勤情况
        getResult(date){
            let date_ = dayjs(date).format('YYYY-MM-DD');
            if(this.list.length>0){
                for(let one of this.list){
                    if(one.date===date_){
                        if(one.color!==""){
                            console.log(one.color)
                            return one.color;
                        }
                    }
                }
            }
        }
    }
}
</script>

<style>
.el-calendar .el-button-group{
    display: none;
}
</style>